<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 嵌套浮动 综合练习 </title>
		<style>
			*{
				margin: 0;
				padding:0;
			}
			/* 最外层 */
			.main{
				width: 100%;
				height: auto;
				border: 1px solid red;
			}
			/* 版心 */
			.center{
				width: 1000px;
				height: 1000px;
				margin: 0 auto;
				/* border: 5px solid yellow; */
			}
			/*  一楼   */
			.center .f1{
				width: 1000px;
				overflow: hidden;   /* 给父级元素添加BFC结界保护  */
				/* border: 5px solid yellow; */
			}
			
			
			/* 一楼一列 */
			.center .f1 .col1{
				width: 610px;
				height: 376px;
				background-color: #ff00ff;
				float: left;
				margin-right: 14px;
			}
			/* 一楼  第二列 */
			.center .f1 .col2{
				width: 376px;
				height: 376px;
				background-color: #0000ff;
				float: left;
			}
			/*  添加一个元素，变成块级元素，再利用clear清除浮动影响
				清除子元素浮动给父元素带来的高度坍塌影响 			 
			 */
/* 			.f1::after{
				content: '';
				display: block;
				clear: both;
			} */
			/* ------------------------第二列------------------------------ */
			.center .f2{
				height: 234px;
				width: 1000px;
				margin-top: 14px;
				/* border: 1px solid red; */
				overflow: hidden;
			}
			/* 2楼1列  */
			.center .f2 .col3{
				height: 234px;
				width: 358px;
				background-color: #008000;
				float: left;
				margin-right: 14px;
			}
			/* 2楼2列  */
			.center .f2 .col4{
/* 				height: 234px;
				width: auto; */
				float: right;
				/* overflow: hidden; */
				/* border: 1px solid red; */
			}
			/* 2楼2列 所有div 公用宽高样式 */
			.center .f2 .col4 > div{
				height: 234px;
				width: 200px;
				float: left;
			}
			/* 2楼2列 1 */
			.center .f2 .col4 .box1{
				background-color: #ffa500;
				
			}
			/* 2楼2列 2 */
			.center .f2 .col4 .box2{
				background-color: #800080;
				margin: 0px 14px;
			}
			/* 2楼2列 3 */
			.center .f2 .col4 .box3{
				background-color: #008b8b;
			}
			
		</style>
	</head>
	<body>
		
		<!-- 最外层功能块 -->
		<div class="main">
			<!-- 版心 1000px -->	
			<div class="center">
				<!-- 正式内容：1楼 -->
				<div class="f1">
					<!-- 1楼里有两列 -->
					<div class="col1"></div>
					<div class="col2"></div>
					
				</div>
				<!-- 正式内容：2楼 -->
				<div class="f2">
					<!-- 2楼里有两列 -->
					<div class="col3"></div>
					<div class="col4">
						<!-- 2楼2列还有3个小块 -->
						<div class="box1"></div>
						<div class="box2"></div>
						<div class="box3"></div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>